<template>
    <div id="box">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item class="allTitle" v-show="changeTitle"
          >全部商品分类</el-menu-item
        >
        <el-menu-item v-show="!changeTitle" @click="mainPage">首页</el-menu-item>
        <el-menu-item
          v-for="(item, index) in dataList"
          :key="index"
          :class="{ color: num == index }"
          @click="onGetIdx(index)"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
    </div>
  </template>
  
  <script>
  export default {
    name: "headers3",
    data() {
      return {
        dataList: [
          { id: 2, name: "戏剧" },
          { id: 3, name: "体育" },
          { id: 4, name: "亲子" },
          { id: 5, name: "舞蹈古典" },
          { id: 6, name: "摇滚" },
        ],
  
        activeIndex: "1",
        changeTitle: true,
        num: 255,
        // key: "",
      };
    },
    methods: {
      onGetIdx(idx) {
        this.changeTitle = false;
        console.log(idx);
        this.num = idx;
        console.log(this.num);
      },
      mainPage() {
        this.changeTitle = true;
        this.num = 255;
      },
    },
    components: {},
    mounted() {},
  };
  </script>
  
  <style scoped>
  .allTitle {
    color: white !important;
    font-weight: 700;
    background: #000000 !important;
    text-align: center;
    width: 200px;
  }
  .color {
    background: #ff3c1c !important;
    color: white !important;
  }
  .el-menu-demo {
  }
  #box {
    width: 1500px;
    margin: 0 auto;
    /* border: 1px red solid; */
  }
  </style>
  